<template>
  <view class="profile-container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-info">
        <!-- 微信原生头像选择按钮 -->
        <button 
          class="avatar-btn" 
          open-type="chooseAvatar" 
          @chooseavatar="onChooseAvatar"
        >
          <image 
            :src="userInfo?.avatar || '/static/images/default-avatar.png'" 
            mode="aspectFill"
            class="avatar-image"
          />
        </button>
        
        <view class="user-details">
          <!-- 微信原生昵称输入框 -->
          <input 
            class="nickname-input" 
            type="nickname" 
            :value="userInfo?.nickname || userInfo?.nickName || '点击设置昵称'"
            placeholder="点击设置昵称"
            @blur="onNicknameReview"
          />
        </view>
      </view>
    </view>
    <!-- 健康服务功能菜单 -->
    <view class="card-section">
      <view class="section-title">健康服务</view>
      <view class="card">
        <view class="grid-menu">
          <view class="menu-item" @click="navigateTo('/pages/appointment/index')">
            <view class="menu-icon">
              <image src="/static/icons/预约挂号.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">预约挂号</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/reports/index')">
            <view class="menu-icon">
              <image src="/static/icons/检查检验报告查询.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">报告查询</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/drugs/index')">
            <view class="menu-icon">
              <image src="/static/icons/药事服务.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">我的用药</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/health/index')">
            <view class="menu-icon">
              <image src="/static/icons/健康档案.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">健康档案</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/doctor/index')">
            <view class="menu-icon">
              <image src="/static/icons/我的医生icon.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">我的医生</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/emergency/index')">
            <view class="menu-icon">
              <image src="/static/icons/门急诊诊疗.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">急诊服务</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/health-plan/index')">
            <view class="menu-icon">
              <image src="/static/icons/健康计划.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">健康计划</view>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/insurance/index')">
            <view class="menu-icon">
              <image src="/static/icons/医保服务.svg" mode="aspectFit" class="icon-svg"></image>
            </view>
            <view class="menu-text">医保服务</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近预约 -->
    <view class="card-section">
      <view class="section-title">最近预约</view>
      <view class="card">
        <view class="appointment-item" @click="navigateTo('/pages/appointment/detail?id=1')">
          <view class="appointment-info">
            <h3>心血管内科 - 李主任</h3>
            <p>2023年11月15日 周三 10:30</p>
          </view>
          <view class="appointment-status status-upcoming">待就诊</view>
        </view>
        <view class="appointment-item" @click="navigateTo('/pages/appointment/detail?id=2')">
          <view class="appointment-info">
            <h3>牙科 - 张医生</h3>
            <p>2023年11月8日 周三 14:00</p>
          </view>
          <view class="appointment-status status-completed">已完成</view>
        </view>
        <view class="appointment-item" @click="navigateTo('/pages/appointment/detail?id=3')">
          <view class="appointment-info">
            <h3>体检中心 - 全面体检</h3>
            <p>2023年10月20日 周五 08:00</p>
          </view>
          <view class="appointment-status status-completed">已完成</view>
        </view>
      </view>
    </view>

    <!-- 健康档案 -->
    <view class="card-section">
      <view class="section-title">健康档案</view>
      <view class="card">
        <view class="record-item" @click="navigateTo('/pages/reports/detail?id=1')">
          <view class="record-icon">
            <image src="/static/icons/体检报告-copy.svg" mode="aspectFit" class="icon-svg"></image>
          </view>
          <view class="record-details">
            <h3>2023年全面体检报告</h3>
            <p>2023年10月20日 | 体检中心</p>
          </view>
        </view>
        <view class="record-item" @click="navigateTo('/pages/reports/detail?id=2')">
          <view class="record-icon">
            <image src="/static/icons/检查检验报告查询.svg" mode="aspectFit" class="icon-svg"></image>
          </view>
          <view class="record-details">
            <h3>胸部X光检查结果</h3>
            <p>2023年9月12日 | 放射科</p>
          </view>
        </view>
        <view class="record-item" @click="navigateTo('/pages/reports/detail?id=3')">
          <view class="record-icon">
            <image src="/static/icons/检查检验报告查询.svg" mode="aspectFit" class="icon-svg"></image>
          </view>
          <view class="record-details">
            <h3>血液检验报告</h3>
            <p>2023年9月10日 | 检验科</p>
          </view>
        </view>
      </view>
    </view>
    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">
        退出登录
      </button>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <view class="version-text" @click="handleVersionClick">版本 {{ appVersion }}</view>
      <view class="copyright">© 2024 医疗就医小程序</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import UserCard from './components/UserCard.vue'
import MenuGroup from './components/MenuGroup.vue'
import { personalMenus, settingsMenus, helpMenus } from './config/menu-config.js'
import profileLogic from './mixins/profile-logic.js'
import settingsManager from './mixins/settings-manager.js'

export default {
  name: 'ProfilePage',
  components: {
    UserCard,
    MenuGroup
  },
  mixins: [profileLogic, settingsManager],
  data() {
    return {
      appVersion: '1.0.0',
      
      // 用户统计数据
      userStats: {
        appointments: 12,
        favorites: 8,
        alerts: 3,
        locations: 156
      },
      
      // 菜单配置
      personalMenus,
      settingsMenus,
      helpMenus,
      
      // 开发者模式
      devClickCount: 0
    }
  },
  computed: {
    ...mapState('auth', ['userInfo', 'isLoggedIn']),
    ...mapGetters('auth', ['isVerified', 'userRole', 'needProfilePrompt']),
    
    // 动态个人菜单
    dynamicPersonalMenus() {
      return this.personalMenus
    },
    
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    // 暂时注释掉自动跳转，用于调试
    // if (!this.isLoggedIn) {
    //   uni.navigateTo({
    //     url: '/pages/login/index?redirect=' + encodeURIComponent('/pages/profile/index')
    //   })
    //   return
    // }
    this.refreshUserData()
    
    // 添加调试日志
    console.log('Profile页面显示:', { 
      isLoggedIn: this.isLoggedIn, 
      userInfo: this.userInfo 
    })
    // 如需完善资料，则在进入个人中心时提示
    if (this.needProfilePrompt) {
      uni.showModal({
        title: '完善资料',
        content: '建议获取头像和昵称用于个人资料展示',
        confirmText: '去授权',
        cancelText: '稍后',
        success: (res) => {
          if (res.confirm) {
            this.handleRequestProfile()
          }
        }
      })
    }
  },
  methods: {
    ...mapActions('auth', ['logout', 'updateUserInfo', 'verifyIdentity']),
    
    // 微信原生选择头像（open-type="chooseAvatar" 回调）
    async onChooseAvatar(e) {
      try {
        const tempAvatar = e?.detail?.avatarUrl
        if (tempAvatar) {
          await this.$store.dispatch('auth/saveProfile', { nickname: this.userInfo?.nickname || this.userInfo?.nickName || '', avatar: tempAvatar })
          uni.showToast({ title: '头像更新成功', icon: 'success' })
        } else {
          // 若未返回，则回退到 getUserProfile 获取
          await this.handleRequestProfile()
        }
      } catch (err) {
        await this.handleRequestProfile()
      }
    },

    // 微信原生昵称输入回调
    async onNicknameReview(e) {
      try {
        console.log('昵称审核回调:', e)
        
        const nickname = e.detail.value
        if (!nickname || !nickname.trim()) {
          uni.showToast({ title: '昵称不能为空', icon: 'none' })
          return
        }
        
        console.log('用户输入的昵称:', nickname)
        
        // 保存用户昵称
        const result = await this.$store.dispatch('auth/saveProfile', { 
          nickname: nickname.trim(),
          avatar: this.userInfo?.avatar || ''
        })
        
        console.log('保存昵称结果:', result)
        
        if (result && result.success) {
          uni.showToast({ title: '昵称已更新', icon: 'success' })
        } else {
          uni.showToast({ title: result?.error || '保存失败', icon: 'none' })
        }
      } catch (error) {
        console.error('保存昵称出错:', error)
        uni.showToast({ title: '保存失败，请重试', icon: 'none' })
      }
    },

    async handleRequestProfile() {
      try {
        console.log('开始获取微信用户资料...')
        
        // 检查是否支持getUserProfile
        if (typeof uni.getUserProfile !== 'function') {
          const errorMsg = '当前环境不支持获取微信用户资料'
          uni.showToast({ title: errorMsg, icon: 'none' })
          return { success: false, error: errorMsg }
        }
        
        // 直接调用小程序接口获取微信资料
        const userRes = await uni.getUserProfile({
          desc: '用于完善个人资料展示',
          lang: 'zh_CN'
        })
        
        console.log('getUserProfile 获取资料结果:', userRes)

        if (userRes && userRes.userInfo) {
          const nickname = (userRes.userInfo.nickName || '').trim()
          const avatar = userRes.userInfo.avatarUrl || ''
          
          console.log('解析出的用户信息:', { nickname, avatar })

          const result = await this.$store.dispatch('auth/saveProfile', { nickname, avatar })
          console.log('保存用户资料结果:', result)
          
          if (result && result.success) {
            this.$store.dispatch('auth/setNeedProfilePrompt', false)
            uni.showToast({ title: '资料更新成功', icon: 'success' })
            return { success: true }
          }
          uni.showToast({ title: result?.error || '保存失败', icon: 'none' })
          return { success: false, error: result?.error || '保存失败' }
        }

        console.log('getUserProfile 未返回用户信息')
        return { success: false, error: '未获取到用户信息' }
      } catch (e) {
        console.error('获取微信用户资料出错:', e)
        
        if (e?.errMsg && e.errMsg.includes('cancel')) {
          return { success: false, error: '用户取消授权' }
        }
        
        const errorMsg = e?.errMsg || e?.message || '授权失败'
        uni.showToast({ title: '授权失败，请重试', icon: 'none' })
        return { success: false, error: errorMsg }
      }
    },

    // 更换头像 - 直接使用微信头像
    async changeAvatar() {
      // 直接获取微信头像
      await this.handleRequestProfile()
    },

    // 处理菜单点击
    handleMenuClick(item) {
      if (item.type === 'switch') {
        // 开关类型不需要跳转
        return
      }
      
      // 处理特殊操作
      if (item.action) {
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        })
        return
      }
      
      if (item.path) {
        uni.navigateTo({
          url: item.path
        })
      } else {
        // 处理特殊功能
        switch (item.key) {
          case 'check_update':
            this.checkUpdate()
            break
          case 'clear_cache':
            this.clearCache()
            break
          default:
            uni.showToast({
              title: '功能开发中',
              icon: 'none'
            })
        }
      }
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        confirmText: '退出',
        cancelText: '取消',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.logout()
              uni.showToast({
                title: '已退出登录',
                icon: 'success'
              })
              
              // 跳转到登录页
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/login/index'
                })
              }, 1500)
            } catch (error) {
              console.error('退出登录失败:', error)
              uni.showToast({
                title: '退出失败',
                icon: 'error'
              })
            }
          }
        }
      })
    },

    // 版本号点击（开发者模式入口）
    handleVersionClick() {
      this.devClickCount++
      
      if (this.devClickCount >= 7) {
        this.devClickCount = 0
        uni.showModal({
          title: '开发者模式',
          content: '是否进入开发者设置？',
          confirmText: '进入',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/dev-settings/index'
              })
            }
          }
        })
      }
      
      // 5秒后重置计数
      setTimeout(() => {
        this.devClickCount = 0
      }, 5000)
    },

    // 通用导航方法
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 引入蓝白主题变量
@import '@/uni.scss';

// 基础变量 - 医疗健康主题
$primary-color: #2c7dbe;
$secondary-color: #50b4c8;
$accent-color: #1890ff;
$success-color: #52c41a;
$error-color: #f5222d;
$bg-color: #f5f7fa;
$card-bg: #ffffff;
$text-primary: #333333;
$text-secondary: #666666;
$border-radius: 24rpx;
$shadow-sm: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
$shadow-md: 0 12rpx 32rpx rgba(0, 0, 0, 0.08);
$transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

.profile-container {
  min-height: 100vh;
  background-color: $bg-color;
  color: $text-primary;
  line-height: 1.6;
  padding-bottom: 120rpx;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

// 用户信息头部
.user-header {
  background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
  color: white;
  padding: 80rpx 40rpx 60rpx;
  border-radius: 0 0 30rpx 30rpx;
  position: relative;
  margin-bottom: 24rpx;
  min-height: 200rpx;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140rpx;
  padding-top: 20rpx;
}

// 微信原生头像按钮
.avatar-btn {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #fff;
  transition: $transition;
  padding: 0;
  
  &:active {
    transform: scale(0.95);
  }
  
  &::after {
    border: none;
  }
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.user-details {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10rpx;
  
  h2 {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    font-weight: 600;
  }
  
  p {
    font-size: 28rpx;
    opacity: 0.9;
    margin-bottom: 10rpx;
  }
}

// 微信原生昵称输入框
.nickname-input {
  font-size: 40rpx;
  font-weight: 600;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  margin-bottom: 10rpx;
  padding: 0;
  width: 100%;
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-size: 36rpx;
  }
}

.id-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 6rpx 20rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  display: inline-block;
}

// 卡片区域样式
.card-section {
  padding: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  margin: 40rpx 0 30rpx;
  padding-left: 20rpx;
  position: relative;
  color: $primary-color;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36rpx;
    width: 8rpx;
    background-color: $primary-color;
    border-radius: 4rpx;
  }
}

.card {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-bottom: 30rpx;
  box-shadow: $shadow-sm;
}

// 健康状态
.health-status {
  display: flex;
  justify-content: space-between;
}

.health-metric {
  text-align: center;
  flex: 1;
}

.metric-value {
  font-size: 48rpx;
  font-weight: bold;
  color: $primary-color;
  margin-bottom: 10rpx;
}

.metric-label {
  font-size: 26rpx;
  color: $text-secondary;
}

// 功能网格菜单
.grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  text-align: center;
}

.menu-item {
  padding: 24rpx 10rpx;
  border-radius: 20rpx;
  background: #f9fafc;
  transition: $transition;
  
  &:active {
    background: #edf2f8;
    transform: scale(0.96);
  }
}

.menu-icon {
  width: 56rpx;
  height: 56rpx;
  margin: 0 auto 16rpx;
  background: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $primary-color;
  
  .icon-svg {
    width: 32rpx;
    height: 32rpx;
  }
  
  .iconfont {
    font-size: 28rpx;
  }
}

.menu-text {
  font-size: 24rpx;
  color: $text-primary;
  font-weight: 500;
}

// 最近预约
.appointment-item {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #eee;
  transition: $transition;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: rgba($primary-color, 0.03);
    margin: 0 -32rpx;
    padding: 24rpx 32rpx;
    border-radius: 12rpx;
  }
}

.appointment-info {
  flex: 1;
  
  h3 {
    font-size: 30rpx;
    margin-bottom: 10rpx;
    color: $text-primary;
  }
  
  p {
    font-size: 26rpx;
    color: $text-secondary;
  }
}

.appointment-status {
  padding: 8rpx 20rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.status-upcoming {
    background: #e6f7ff;
    color: $accent-color;
  }
  
  &.status-completed {
    background: #f6ffed;
    color: $success-color;
  }
}

// 健康档案记录
.record-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
  transition: $transition;
  flex-direction: row;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: rgba($primary-color, 0.03);
    margin: 0 -32rpx;
    padding: 24rpx 32rpx;
    border-radius: 12rpx;
  }
}

.record-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 20rpx;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  color: $primary-color;
  
  .icon-svg {
    width: 36rpx;
    height: 36rpx;
  }
  
  .iconfont {
    font-size: 32rpx;
  }
}

.record-details {
  flex: 1;
  
  h3 {
    font-size: 30rpx;
    margin-bottom: 8rpx;
    color: $text-primary;
  }
  
  p {
    font-size: 26rpx;
    color: $text-secondary;
  }
}

// 资料授权提示块
.profile-authorize {
  background: #fffbe6;
  border: 2rpx solid #ffe58f;
  color: #ad6800;
  margin: 32rpx;
  border-radius: $border-radius;
  padding: 32rpx;
  box-shadow: $shadow-sm;
  text-align: center;
}

.authorize-title {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.authorize-desc {
  font-size: 26rpx;
  margin-bottom: 24rpx;
}

.authorize-btn {
  background: $success-color;
  color: #fff;
  border: none;
  padding: 24rpx 32rpx;
  border-radius: $border-radius;
  font-size: 28rpx;
  font-weight: 500;
}

// 统计区域 - 增强版
.stats-section {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 50%, #f8fafc 100%);
  margin: 16rpx 24rpx;
  border-radius: 32rpx;
  padding: 40rpx 28rpx;
  box-shadow: 
    0 12rpx 48rpx rgba(0, 0, 0, 0.08),
    0 4rpx 16rpx rgba(0, 0, 0, 0.04),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
  border: 1rpx solid rgba(24, 144, 255, 0.08);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #1890ff 0%, #40a9ff 50%, #1890ff 100%);
    background-size: 200% 100%;
    animation: statsGlow 3s ease-in-out infinite;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24rpx;
}

.stat-item {
  text-align: center;
  padding: 36rpx 24rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.03) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(64, 169, 255, 0.02) 100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border: 1rpx solid rgba(24, 144, 255, 0.08);
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(24, 144, 255, 0.08), transparent);
    transition: left 0.6s ease;
  }
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 
      0 8rpx 32rpx rgba(24, 144, 255, 0.15),
      0 2rpx 8rpx rgba(24, 144, 255, 0.08);
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.06) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(64, 169, 255, 0.04) 100%);
    
    &::before {
      left: 100%;
    }
  }
  
  &:active {
    transform: translateY(-2rpx) scale(0.98);
  }
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #1890ff;
  margin-bottom: 12rpx;
  position: relative;
  text-shadow: 0 1rpx 2rpx rgba(24, 144, 255, 0.1);
  animation: countUp 0.8s ease-out;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -8rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #1890ff, #40a9ff);
    border-radius: 2rpx;
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
  }
}

.stat-label {
  font-size: 26rpx;
  color: #595959;
  font-weight: 500;
  opacity: 0.8;
  transition: color 0.3s ease;
  
  .stat-item:hover & {
    color: #1890ff;
    opacity: 1;
  }
}

// 菜单区域
.menu-section {
  padding: 0 24rpx;
}

// 退出登录 - 增强版
.logout-section {
  padding: 0 32rpx;
  margin-top: 40rpx;
}

.logout-btn {
  width: 100%;
  padding: 36rpx 32rpx;
  background: linear-gradient(135deg, $error-color 0%, #ff4d4f 50%, #ff7875 100%);
  color: white;
  border: none;
  border-radius: 28rpx;
  font-size: 30rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(245, 34, 45, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
  }
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 16rpx rgba(245, 34, 45, 0.3);
    
    &::before {
      left: 100%;
    }
  }
}

// 版本信息 - 增强版
.version-info {
  text-align: center;
  padding: 48rpx 32rpx;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80rpx;
    height: 6rpx;
    background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
    border-radius: 3rpx;
  }
}

.version-text {
  font-size: 26rpx;
  color: #8c8c8c;
  margin-bottom: 12rpx;
  font-weight: 500;
  transition: color 0.3s ease;
  
  &:active {
    color: #1890ff;
  }
}

.copyright {
  font-size: 22rpx;
  color: #bfbfbf;
  opacity: 0.8;
}

// 新增动画
@keyframes statsGlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes countUp {
  0% {
    opacity: 0;
    transform: translateY(10rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.2);
  }
}

// 头像选择弹窗
.avatar-popup {
  border-radius: 24rpx 24rpx 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
}

.popup-close {
  padding: 16rpx;
  color: #8c8c8c;
  
  .iconfont {
    font-size: 32rpx;
  }
}

.avatar-options {
  display: flex;
  padding: 48rpx 32rpx;
  gap: 32rpx;
}

.avatar-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 16rpx;
  
  &:active {
    background: #f5f5f5;
    border-radius: 16rpx;
  }
}

.option-icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  
  .iconfont {
    font-size: 36rpx;
    color: white;
  }
  
  &.camera-icon {
    background: #1890ff;
  }
  
  &.album-icon {
    background: #52c41a;
  }
  
  &.default-icon {
    background: #8c8c8c;
  }
}

.option-text {
  font-size: 24rpx;
  color: #595959;
  text-align: center;
}

// 未登录状态样式
.not-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  background: #f5f5f5;
}

.tip {
  color: #8c8c8c;
  font-size: 28rpx;
}

.login-btn {
  width: 300rpx;
  height: 88rpx;
  background: #1890ff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 28rpx;
}
</style>